<template>
  <div class="container-water-fall">
    <waterfall :col="col" :data="photo_list" @loadmore="loadmore">
      <template>
        <div class="cell-item" v-for="(item, index) in photo_list" :key="index">
          <img v-if="item.img" :lazy-src="item.img" alt="加载错误" />
        </div>
      </template>
    </waterfall>
    <!-- <loading :show="loading" /> -->
  </div>
</template>

<script>
export default {
  props: {
    photo_list: Array,
    col: {
      default: 5,
    },
  },
  methods: {
    scroll(scrollData) {
      console.log(scrollData);
    },
    loadmore(index) {
      console.log(index);
      this.photo_list = this.photo_list.concat(this.photo_list);
    },
  },
};
</script>

<style lang="scss" scoped>
.cell-item {
  margin: 0 4px 8px;
  border: 4px solid #fff;
  border-radius: 10%;
  overflow: hidden;
  cursor: pointer;
  img {
    width: 100%;
    display: block;
    transition: all 0.3s;
    &:hover {
      transform: scale(1.03);
    }
  }
}
</style>
